<template>
  <li class="list-group-item">
    <div class="handle">
      <button class="btn btn-danger" @click="handleDel">删除</button>
    </div>
    <p class="user">
      <span>{{ comment.userName }}</span>
      <span>说:</span>
    </p>
    <p class="centence">{{ comment.content }}</p>
  </li>

</template>
<script>
export default {
  name: "CommentItem",
  props: {
    comment: { 
      type: Object,
      required:true
    },
    delCommentItem: {
      type: Function,
      required: true
    },
    

  },
  methods: {
    handleDel() { 
      if (window.confirm("确定要删除吗?")) { 
        console.log(this.index);
        this.delCommentItem(this.index);
      }
    }
  }
}
</script>
<style>
 /* item */
 li {
   transition: 0.5s;
   overflow: hidden;
 }

 .handle {
   width: 40px;
   border: 1px solid #ccc;
   background: #fff;
   position: absolute;
   right: 10px;
   top: 1px;
   text-align: center;
 }

 .handle a {
   display: block;
   text-decoration: none;
 }

 .list-group-item .centence {
   padding: 0px 50px;
 }

 .user {
   font-size: 22px;
 }
</style>